<template>
	<view class="shop-switching">
		<view class="now-shop">
			<view class="now-shop-img">
				<image class="image" :src="mainInfo.store_bannerimage" mode=""></image>
				<view class="romms-num">{{mainInfo.room_count}}个教室</view>
			</view>
			<view class="now-shop-text">
				<view class="now-shop-text-one">
					<view class="">
						{{mainInfo.store_name}}
					</view>
					<image src="../../static/images/right.png" mode=""></image>
				</view>
				<view class="now-shop-text-two">
					{{mainInfo.store_address}}
				</view>
				<text class="now-shop-text-three">{{mainInfo_distance | distanceFormat}}</text>
			</view>
		</view>
		<u-divider text="其他门店" lineColor='#C0C4CC' textColor="#909399"></u-divider>

		<view class="else-shop" v-for="v,i in stores" :key="i" @click="goHome(v)">
			<view class="now-shop-img">
				<image class="image" :src="v.store_bannerimage" mode="store_bannerimage"></image>
				<view class="romms-num">{{v.room_count}}个教室</view>
			</view>
			<view class="now-shop-text">
				<view class="now-shop-text-one">
					<view class="">
						{{v.store_name}}
					</view>
				</view>
				<view class="now-shop-text-two">
					{{v.store_address}}
				</view>
				<text class="now-shop-text-three">{{store_julis[i] | distanceFormat}}</text>
			</view>
		</view>
		<no-data v-if="!stores || stores.length === 0"></no-data>
	</view>

</template>

<script>
	import {
		get_all_stores_api
	} from '@/common/api.js'

	export default {

		data() {
			return {
				user_lat: null,
				user_lng: null,
				stores: [],
				mainInfo: {
					num: 0,
					store_name: '',
					store_address: ''
				}
			};
		},
		computed: {
			mainInfo_distance: function() {
				if (null == this.user_lat) {
					return null
				} else {
					return this.distance(this.user_lat, this.user_lng, this.mainInfo.store_latitude, this.mainInfo.store_longitude)
				}
			},
			store_julis: function() {
				if (null == this.user_lat) {
					return []
				} else {
					let k = this.stores.map((e) => {
						return this.distance(this.user_lat, this.user_lng, e.store_latitude, e.store_longitude)
					})
					return k
				}
			}
		},
		onLoad() {
			this.getStore()
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.user_lat = res.latitude;
					this.user_lng = res.longitude;
					// this.getStore()
				},
			});
		},
		methods: {
			getMile(e) {
				return this.distance(this.user_lat, this.user_lng, +e.store_latitude, +e.store_longitude)
			},
			getStore() {
				get_all_stores_api().then(res => {
					const storesData = res.data;
					this.mainInfo = storesData.find(e => e.id == this.vuex_selected_store) || {}
					this.stores = storesData.filter(e => e.id != this.vuex_selected_store);
				});
			},
			goHome(v) {
				this.$u.vuex('vuex_selected_store', v.id);
				uni.switchTab({
					url: '/pages/index/index'
				});
				uni.$emit('change_store', {
					id: JSON.stringify(v.id)
				})
				// uni.$u.route({
				// 	url: 'pages/index/index',
				// 	type: 'switchTab',
				// 	params: {
				// 		id: 'lisa'
				// 	}
				// })
			}

		}
	}
</script>

<style lang="scss">
	.shop-switching {
		box-sizing: border-box;
		padding: 24rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin-bottom: 24rpx;

		.emptyContent {
			height: calc(100vh - 350rpx);
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.now-shop {
			display: flex;

			.now-shop-img {
				width: 304rpx;
				height: 208rpx;
				overflow: hidden;
				background-size: cover;
				background-repeat: no-repeat;
				position: relative;

				.image {
					width: 100%;
					height: 100%;
				}

				.romms-num {
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 48rpx;
					line-height: 48rpx;
					color: #fff;
					background: rgba(70, 70, 70, 0.4);
					margin-top: 160rpx;
					font-size: 24rpx;
					font-weight: 300;
					font-size: 24rpx;
					text-align: right;
					padding: 0 10rpx;
					box-sizing: border-box;
				}
			}

			.now-shop-text {
				margin-left: 24rpx;

				.now-shop-text-one {
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						width: 54rpx;
						height: 54rpx;
					}

					view {
						width: 326rpx;
						text-overflow: ellipsis; //省略号
						overflow: hidden; //超出部分隐藏
						white-space: nowrap; //不换行
						font-size: 36rpx;
						color: #000000;
					}
				}

				.now-shop-text-two {
					width: 338rpx;
					height: 100rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					margin-top: 10rpx;
					color: #606266;
					margin-bottom: 8rpx;
				}

				.now-shop-text-three {
					margin-top: 12rpx;
					font-size: 28rpx;
					color: #606266;
				}
			}

		}

		.else-shop {
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			border: 4rpx solid #F3F4F6;
			display: flex;

			box-sizing: border-box;
			padding: 24rpx;
			margin-bottom: 32rpx;

			.now-shop-img {
				width: 304rpx;
				height: 208rpx;
				overflow: hidden;
				background-size: cover;
				background-repeat: no-repeat;
				position: relative;

				.image {
					width: 100%;
					height: 100%;
				}

				.romms-num {
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 48rpx;
					line-height: 48rpx;
					text-align: end;
					box-sizing: border-box;
					padding: 0 10rpx;
					color: #fff;
					background: rgba(70, 70, 70, 0.4);
					font-size: 24rpx;
					font-weight: 300;
				}
			}

			.now-shop-text {
				margin-left: 24rpx;

				.now-shop-text-one {
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						width: 326rpx;
						text-overflow: ellipsis; //省略号

						overflow: hidden; //超出部分隐藏

						white-space: nowrap; //不换行
						font-size: 36rpx;

						color: #000000;
					}

					image {
						width: 53rpx;
						height: 40rpx;
					}

				}

				.now-shop-text-two {
					width: 326rpx;
					height: 100rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					margin-top: 14rpx;
					color: #606266;
					margin-bottom: 10rpx;
					overflow: hidden; //超出部分隐藏

					-webkit-line-clamp: 2; //显示几行

					text-overflow: ellipsis; //超出部分显示省略号

					display: -webkit-box; //将对象作为弹性伸缩盒子模型显示

					-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式 纵向

				}

				.now-shop-text-three {
					margin-top: 12rpx;
					font-size: 28rpx;
					color: #606266;
				}
			}

		}
	}

	.u-divider.data-v-5257fd26 {
		margin: 50rpx 0 48rpx 0;
	}
</style>